<template>
	<div class="app-container">
		
		<el-tree ref="treeRef" 
			node-key="id" 
			:data="options"
			:default-expanded-keys="[1]"
			@node-click="nodeclick"
			:props="{'children': 'children','label':'name','value':'id','disabled':'disable'}">
			<template #default="{ node, data }">
				<div class="lineDiv">
					<div v-if="data.avatar" class="lineimgs">
						<img class="lineimg" style="width: 20px;height: 20px;" :src="data.avatar" alt="">
					</div>
					<div class="lineTx">
						{{ node.label }} 
						
						<el-tag type="primary" style="margin-left: 10px;" v-if="data.position">{{data.position}}</el-tag>
						<el-tag type="success" style="margin-left: 10px;" v-if="data.is_leader">负责人</el-tag>
					
					
					</div>
				</div>
			</template>
		</el-tree>
			
		<el-dialog
		    v-model="dialogVisible"
		    title="个人信息"
		    width="1000" >
		    <el-descriptions border column="1">
				<el-descriptions-item label="id">{{dataInfo.uid}}</el-descriptions-item>
		        <el-descriptions-item label="姓名">{{dataInfo.name}}</el-descriptions-item>
				<el-descriptions-item label="职位">{{dataInfo.position}}</el-descriptions-item>
				<el-descriptions-item label="公司id">
					<el-tag style="margin-right: 10px;" v-for="item in dataInfo.company" type="warning">{{item}}</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="直属领导">
					{{dataInfo.direct_leader_info?.name}}
				</el-descriptions-item>
				<el-descriptions-item label="部门">		
					<el-tag style="margin-right: 10px;" v-for="item in dataInfo.department_info" type="primary">{{item}}</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="手机号">
					{{dataInfo.mobile}}
				</el-descriptions-item>
				<el-descriptions-item label="身份证号">
					{{dataInfo.idcard}}
				</el-descriptions-item>
		      </el-descriptions>
		</el-dialog>	
	</div>
</template>


<script setup lang="ts">
	defineOptions({
		name: "UserShow",
		inheritAttrs: false,
	});

	//接口地址
	import {
		getDepartmentAndUser
	} from "@/api/doc";
	import {
		getUserForm,	
	} from "@/api/user";
	
	const options=ref([]);
	const dialogVisible = ref(false);
	const dataInfo = ref({});
	/**
	 * 获取审批人列表
	 */
	function getShenPlist() {
		getDepartmentAndUser().then((res) => {
			options.value = res.data
		}).finally(() => {})
	}
	function nodeclick(a,b,c){
		console.log(a,b,c)
		dialogVisible.value = true;
		getUserForm(a.uid).then(({ data }) => {
			console.log(data)
			dataInfo.value = data;
			
		});
		
	}
	
	
	onMounted(() => {
		getShenPlist();
	});
</script>